<template>
  <div class="outbound">
    <div class="outbound-work">
      <div class="outbound-work-wrapper">
        <div
          class="desc_box"
          v-for="(listItemData, listItemIndex) in tableData"
          :key="listItemIndex"
          @click="eventNext(listItemData)"
        >
          <div class="item_title">
            <span class="title-label">
              <template v-if="!listItemData.deviceId">
                部门
              </template>
              <template v-if="listItemData.deviceId">
                设备
              </template>
            </span>
            <span class="title-text">
              <template v-if="!listItemData.deviceId">
                {{ listItemData.departmentName }}
              </template>
              <template v-if="listItemData.deviceId">
                {{ listItemData.deviceName }}
              </template>
            </span>
            <template>
              <span class="title-tip" style="text-align: right;">
                部件数量：{{ listItemData.countNum }}
              </span>
            </template>
          </div>
          <div class="item-body">
            <span v-if="listItemData.deviceId">
              设备编号：{{ listItemData.deviceCode }}
            </span>
            <span v-else></span>
            <span
              class="item-show"
              @click.stop="eventpartListShow(listItemData, listItemIndex)"
            >
              <template v-if="showIndex === listItemIndex && show">
                <span>收起</span>
              </template>
              <template v-else>
                <span>展开</span>
              </template>
            </span>
          </div>
          <template v-if="showIndex === listItemIndex && show">
            <div
              class="item-chlid"
              v-for="(item, index) in listItemData.partList"
              :key="item.id + index"
              @click.stop="eventChlid(item)"
            >
              <div class="child-title">
                <span class="child-label">
                  备件
                </span>
                <span>{{ item.sparePartName }}</span>
              </div>
              <div class="child-body">备件型号：{{ item.sparePartModel }}</div>
              <div class="child-body">
                出库数量：{{ item.outRepertoryCount }} 件
              </div>
              <div class="child-body">
                领出时间：
                {{ item.outRepertoryTime | formatDate("YYYY-MM-DD HH:mm") }}
              </div>
              <div class="child-body handle">
                领用人：{{ item.receiveOperatorName }}
                <div class="handle-btn">
                  <span class="btn" @click.stop="eventDetail(item)">
                    详情
                  </span>
                </div>
              </div>
            </div>
          </template>
          <div
            class="newpage_work_more"
            v-if="showMore && show && showIndex === listItemIndex"
            @click.stop="getMore(listItemData)"
          >
            查看更多
          </div>
        </div>
        <div v-if="!tableData.length" class="not-content">
          <img src="/static/img/zwlr-icon.png" />
          <div class="title">暂无数据</div>
        </div>
      </div>
    </div>
    <div class="add-btn">
      <div class="btn" @click="eventAdd">新增出库单</div>
    </div>
  </div>
</template>
<script>
import iuCard from "@/components/common/card/index";
import SpotCheckDao from "@/daos/spotCheckDao";
import depTree from "@/components/common/tree";
export default {
  name: "outboundConsume",
  components: {
    depTree,
    iuCard
  },
  data() {
    return {
      showIndex: 1,
      showMore: false,
      show: false,
      tableData: [],
      partList: [],
      isLastLevel: false,
      pageSize: 10,
      pageNum: 1,
      childPageSize: 10,
      childPageNum: 1,
    };
  },
  //返回首页的公共方法
  inject: ["backToHomepage"],
  activated() {
    this.getoutboundMore();
  },
  props: {
    curDepartment: {
      type: Object,
      default: () => {
        return {};
      }
    },
    navIndex: Number
  },
  watch: {
    curDepartment: {
      deep: true,
      immediate: true,
      handler: function() {
        if (this.navIndex === 1) {
          this.getoutboundMore();
        }
      }
    }
  },
  created() {},
  mounted() {},
  computed: {
    user() {
      return this.$store.state.user;
    }
  },
  methods: {
    init() {

    },
    back() {
      this.$router.go(-1);
    },
    getMore(item) {
      this.childPageNum++;
      this.getOutboundOrderDepartmentDetails(item);
    },
    getoutboundMore() {
      if (!this.curDepartment || !this.curDepartment.id) {
        return;
      }
      if (this.user) {
        let node = this.treeFind(
          this.user.serviceAreaTree.children,
          e => e.id === this.curDepartment.id
        );
        this.isLastLevel = node && !node.children.length;
      }
      this.getOutboundOrderDepartment();
    },
    getOutboundOrderDepartment() {
      if (this.isLastLevel) {
        this.getOutboundOrderDevice();
        return;
      }
      SpotCheckDao.getOutboundOrderDepartment(
        {
          // orgId: this.user.org.id,
          pageSize: this.pageSize,
          pageNum: this.pageNum,
          departmentId: this.curDepartment.id
        },
        res => {
          if (this.pageNum === 1) {
            this.tableData.splice(0, this.tableData.length);
          }
          if (res && res.length) {
            this.tableData.push(...res);
          }
        }
      );
    },
    getOutboundOrderDepartmentDetails(item) {
      SpotCheckDao.getOutboundOrderDepartmentDetails(
        {
          pageNum: this.childPageNum,
          pageSize: this.childPageSize,
          departmentId: item.departmentId || this.curDepartment.id,
          deviceId: item.deviceId
        },
        res => {
          if (
            !this.tableData[this.showIndex].partList ||
            this.childPageNum === 1
          ) {
            this.$set(this.tableData[this.showIndex], "partList", res.content);
          } else {
            this.tableData[this.showIndex].partList.push(...res.content);
          }
          this.showMore =
            res.totalPages && this.childPageNum !== res.totalPages;
        }
      );
    },
    getOutboundOrderDevice() {
      SpotCheckDao.getOutboundOrderDevice(
        {
          pageNum: this.childPageNum,
          pageSize: this.childPageSize,
          departmentId: this.curDepartment.id,
          deviceId: null
        },
        res => {
          if (this.pageNum === 1) {
            this.tableData.splice(0, this.tableData.length);
          }
          if (res && res.length) {
            this.tableData.push(...res);
          }
        }
      );
    },
    treeFind(tree, func) {
      for (const data of tree) {
        if (func(data)) return data;
        if (data.children && data.children.length) {
          const res = this.treeFind(data.children, func);
          if (res) return res;
        }
      }
      return null;
    },
    eventpartListShow(item, index) {
      if (this.showIndex !== index || !this.show) {
        this.show = true;
      } else {
        this.show = false;
      }
      this.childPageNum = 1;
      this.showIndex = index;
      if (this.show) {
        this.getOutboundOrderDepartmentDetails(item);
      }
    },
    eventNext(item) {
      this.showMore = false
      if (this.isLastLevel) {
        this.eventChlid(item);
      } else {
        // this.$refs.depTree.change(item.departmentId, item.departmentName);
        if (item.departmentId && item.departmentName) {
          this.$emit("eventOpenNext", item);
        }
      }
    },
    eventChlid(item) {},
    eventAdd() {
      this.$router.push({
        name: "outboundAdd",
      });
    },
    eventDetail(item) {
      //   this.store.id = id;
      // this.$store.commit("setoutboundDetails", {});
      this.show = false;
      this.$router.push({
        name: "outboundDetail",
        query: {
          id: item.id
        }
      });
    },
    reset() {
      this.curDepartment.id = "";
      this.curDepartment.departmentName = "全企业";
    },
  }
};
</script>

<style lang="less" scoped>
.outbound {
  height: 100vh;
  background: #1b1c32;
  position: relative;
  &.show-more-open {
    overflow: hidden;
  }

  .outbound-work {
    background: #1b1c32;
    .outbound-work-wrapper {
      padding: 0 16px 50px;
      overflow: auto;
      .desc_box {
        padding: 8px;
        height: auto;
        min-height: 80px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        justify-content: center;
        font-size: 14px;
        color: #fff;
        background: #292a4d;
        border-radius: 5px;
        margin-bottom: 12px;
        .ellipsis {
          display: inherit !important;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
        .item_title {
          font-size: 17px;
          color: #fff;
          // overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          word-break: keep-all;
          display: flex;
          align-items: center;
          justify-content: space-between;

          .title-label {
            margin-left: -8px;
            border-radius: 20px;
            border-top-left-radius: 0px;
            border-bottom-left-radius: 0px;
            font-size: 14px;
            padding: 0 12px 1px 8px;
            background-color: #456de6;
            margin-right: 8px;
          }
          .title-text {
            margin-right: 8px;
          }
          .title-tip {
            width: 100%;
            margin-right: 8px;
            font-size: 14px;
            // color: #dd9710;
            &.status {
              color: #456de6;
            }
            &.status1,
            &.status4 {
              color: #4fa8e7;
            }
            &.status3 {
              color: #456de6;
            }
            &.status5 {
              color: #dd9710;
            }
            &.status9,
            &.status7 {
              color: #dd9710;
            }
          }
        }
        .item-body {
          color: #456de6;
          font-size: 16px;
          padding: 12px 0 4px;
          display: flex;
          justify-content: space-between;
          > span {
            flex: 1;
          }
          .item-show {
            color: #fff;
            font-size: 14px;
            width: 52px;
            padding: 1px 0;
            flex: none;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 80px;
            border: 1px solid #456de6;
          }
        }
        .item-chlid {
          border-top: 1px solid rgba(255, 255, 255, 0.5);
          padding-top: 15px;
          padding-bottom: 6px;
          font-size: 14px;
          color: rgba(255, 255, 255, 0.6);
          .child-title {
            color: #fff;
            // overflow: hidden;
            font-size: 16px;
            text-overflow: ellipsis;
            white-space: nowrap;
            word-break: keep-all;
            display: flex;
            align-items: center;
            // justify-content: space-between;

            .child-label {
              font-size: 14px;
              margin-right: 8px;
              padding: 0 6px 1px;
              color: #fff;
              border: 1px solid #456de6;
              border-radius: 2px;
            }
            .child-tip {
              width: 100%;
              margin-right: 8px;
              font-size: 14px;
              &.status {
                color: #dd9710;
              }
              &.status {
                color: #456de6;
              }
              &.status1,
              &.status4 {
                color: #4fa8e7;
              }
              &.status3 {
                color: #456de6;
              }
              &.status5 {
                color: #dd9710;
              }
              &.status9,
              &.status7 {
                color: #dd9710;
              }
            }
          }

          .child-body {
            font-size: 14px;
            margin: 8px 0;
            display: flex;
            align-items: center;
            // justify-content: space-between;
            .child-body-state {
              margin-left: 8px;
              padding: 0 2px 1px;
              color: #456de6;
              border: 1px solid #456de6;
              border-radius: 2px;
            }
            &.handle {
              justify-content: space-between;
              // color: #fff;
            }
          }
          .handle-btn {
            margin-left: 8px;
            flex: none;
          }
          .btn {
            color: #fff;
            font-size: 14px;
            background-color: #456de6;
            padding: 2px 11px 3px;
            border-radius: 12px;
          }
        }
        .newpage_work_more {
          height: 40px;
          font-size: 12px;
          line-height: 40px;
          text-align: center;
          color: #456de6;
        }
      }

      .newpage_work_more {
        height: 40px;
        font-size: 12px;
        line-height: 40px;
        text-align: center;
        color: #456de6;
      }
    }
  }
  .add-btn {
    width: 100%;
    padding: 6px;
    position: fixed;
    bottom: 0;
    background: #1b1c32;
    .btn {
      width: 80%;
      margin: 0 auto;
      padding: 8px 0;
      font-size: 16px;
      color: #ffffff;
      text-align: center;
      background: #3967dc;
      border-radius: 5px;
    }
  }
}

.not-content {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  img {
    width: 64px;
    height: 64px;
    margin-left: 20px;
  }
  .title {
    margin: 8px auto;
    width: 126px;
    height: 40px;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(158, 198, 251, 1);
    line-height: 20px;
    text-align: center;
  }
}
</style>
